import './pagination.scss';
import { cssPrefix } from '../baseData';

import React from 'react';

import { TotalInfo, PageItem, ChangeSize, QuickJumper } from './PaginationItem.jsx'

export default class Pagination extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      settings: {
        ...this.settings(),
      }
    }

    this.changePage = this.changePage.bind(this);
    this.changePageSize = this.changePageSize.bind(this);
  }

  hasPages(settings){
    let { total, pageSize, pages } = settings,
      errorInfo = '';
    // if(!total){
    //   errorInfo = 'total 不能为空';
    // }
    if(!errorInfo && typeof total != 'number'){
      errorInfo = 'total 只能为正整数';
    }
    if(!errorInfo && !pageSize){
      errorInfo = 'pageSize 不能为空';
    }
    if(!errorInfo && typeof pageSize != 'number'){
      errorInfo = 'pageSize 只能为正整数';
    }

    pages = Math.ceil(total / pageSize);

    return {errorInfo, pages};
  }

  checkCurrent(current, pages){
    (!current || typeof current != 'number') && (current = 1);
    current > pages && (current = pages);
    current <= 0 && (current = 1);
    return current;
  }

  settings(props){
    let settings = {
      current: 1,       // 当前页页标
      total: 0,         // 分页数据总条数
      pages: 0,         // 页数
      pageSize: 10,     // 每页显示条数
      pageItemSize: 9,  // 分页的页标显示个数，simpleType为false时有效（暂时不能修改）
      onPageChange: function(){},   // pageChange 后调用，返回参数： current, settings
      hasSizeChanger: false, // 是否显示修改每页显示条数功能
      pageSizeOptions: [10, 20, 30],  // 每页条数修改值列表，hasSizeChanger 为true时有效
      onSizeChange: function(){}, // 每页条数改变后的回调函数，hasSizeChanger 为true时有效， 返回参数：pageSize, settings
      hasQuickJumper: false,     // 是否显示快速跳转页面功能。
      simpleType: false,    // 极简分页显示
      prevPage: '上一页',  // 前一页显示格式
      nextPage: '下一页', // 后一页显示格式
      firstPage: null,  // 第一页显示格式
      lastPage: null,   // 最后一页显示格式
      showTotal: function(total, pages, current){ // 总条数显示格式
        return '';
      },
      ...(props ? props : this.props)
    },
      pagesInfo = this.hasPages(settings),
      current = this.checkCurrent(settings.current, pagesInfo.pages);
    return {
      ...settings,
      ...pagesInfo,
      current
    }
  }

  changePage(current){

    if(!current)return;

    let { onPageChange } = this.state.settings;
    this.changeSettings({current}, ()=>{
      typeof onPageChange == 'function' && onPageChange(current, this.state.settings);
    });
  }

  changePageSize(e){
    let { settings } = this.state,
      pageSize = e.target.value;
    settings.pageSize = pageSize;

    let pagesInfo = this.hasPages(settings),
      current = this.checkCurrent(settings.current, pagesInfo.pages);

    this.changeSettings({pageSize, ...pagesInfo, current}, ()=>{
      settings.onSizeChange(pageSize, settings)
    });
  }

  changeSettings(data, callback){
    this.setState({
      settings: {
        ...this.state.settings,
        ...data
      }
    }, callback)
  }

  componentWillReceiveProps(props){
    let settings = {
      ...this.state.settings,
      ...props
    },
      pagesInfo = this.hasPages(settings),
      current = this.checkCurrent(settings.current, pagesInfo.pages);

    this.setState({
      settings: {
        ...settings,
        ...pagesInfo,
        current
      }
    })
  }

  render(){
    let { settings } = this.state,
      { errorInfo, pages, hasSizeChanger, hasQuickJumper } = settings;

    if(pages > 0){
      return <div className={`${cssPrefix}pagination-wrap`}>
        {
          hasSizeChanger && <ChangeSize {...settings} changePageSize={this.changePageSize} />
        }
        <TotalInfo {...settings} />
        <PageItem {...settings} changePage={this.changePage} />
        {
          hasQuickJumper && <QuickJumper {...settings} changePage={this.changePage} />
        }
      </div>
    }else{
      return <div className={`${cssPrefix}pagination-wrap`}>
        <div className='error-info'>{errorInfo ? errorInfo : ''}</div>
      </div>
    }
  }
}